⏱️ Do It Now - Front Loading
(1) Create a OneNote Page and copy this into the title:
Lesson 3 - Summer 1 - HTML Webpages
(2) Click on this to open the reading material
(3) Copy this into a OneNote Page and complete it
|
📝 Do It Now |
|
Topic from which to answer questions Do each of the following:
|
What is HTML?
HTML stands for HyperText Markup Language. It is the standard language used to create webpages.
HTML is not a programming language like Python or JavaScript. Instead, it is a markup language, which means it is used to structure and organise content on a webpage.
Think of HTML like a skeleton
- It tells the browser what things are (like headings, paragraphs, images, and links)
- It does not control how things look (that’s usually done with another markup language called CSS)
- It does not make things interactive (that’s usually done with a coding language called JavaScript)
HTML Tags
HTML uses tags, which are special codes written inside angle brackets.
<h1>This is a heading</h1> <p>This is a paragraph</p>
Most tags come in pairs:
- An opening tag: <p>
- A closing tag: </p>
Everything inside the tags is called the content.
How HTML Works
Web browsers (like Chrome or Edge) read HTML and display it as a webpage.
👩🎨 Task Guidelines
- Over the next few weeks you will work to create your own HTML website
- It will be on any topic of your choice, and will probably feature 3-4 pages.
- Over the next few slides you will be able to work along with video tutorials that will demonstrate how to set up a website and add some HTML content to the homepage
Proceed to the next slide➡️➡️
🎥 (1) Setting up a HTML Website Project
(1) Work with This video to learn how to set up a website project in VSCODE
(2) Remember to share your project and paste a link to it in OneNote
➡️ Next Slide ➡️
🎥 (2) Adding HTML to the Webpage
(1) Work with This video to learn how to add HTML elements to your webpage.
(2) Review the examples to check you are doing it correctly
Click to see examples
<h1>This is a main heading</h1> <h2>This is a sub-heading</h2> <h3>This is also a sub-heading</h3> <p>This is a paragraph</p>
➡️ Next Slide ➡️
🎥 (3) Styling your HTML with CSS
(1) Work with This video to learn how to style the elements on your webpage with CSS.
Click to see examples
h1{
color:blue;
font-family:arial;
text-decoration:underline;
}
p{
font-family:arial;
}
body{
background-color:yellow;
}
➡️ Next Slide ➡️
⌨️ Independent Activity
Now you understand how to use HTML elements and CSS styles, it is time to create a web page of content
- Ensure it features several sections
- Ensure each section has a sub-heading and paragraphs
- Ensure both open and close tags are used for each HTML element